<template>
    <div>
        <div class="demo-image">
            <div v-for="(item,index) in list" :key="index" class="block">
                <el-image style="width: 150px; height: 150px" :src="item.img" :fit="cover" />
                <span class="hidden demonstration" :title="item.name">{{ item.name }}</span>
                <el-row>
                    <el-col :span="10" class="demonstration" >￥{{ item.price }}</el-col>
                    <el-col :span="4" class="demonstration" @click="routeClick(item.id)"><el-tooltip content="商品详情" placement="bottom"><el-icon><View /></el-icon></el-tooltip></el-col>
                    <el-col :span="4" class="demonstration" @click="cartAdd(item.id)"><el-tooltip content="加入购物车" placement="bottom"><el-icon><ShoppingCart /></el-icon></el-tooltip></el-col>
                    <el-col :span="4" class="demonstration" @click="orderAdd(item)"><el-tooltip content="购买商品" placement="bottom"><el-icon><GoodsFilled /></el-icon></el-tooltip></el-col>
                    <el-col :span="2" class="demonstration"></el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import { userGoodsStore } from '@/store/goods';
import { GoodsFilled, ShoppingCart, View } from '@element-plus/icons-vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    props:['list'],
    components:{
        View,
        ShoppingCart,
        GoodsFilled
    },
    data() {
        return {
            data:[],
            store:userGoodsStore(),
            time: new Date(),
            orderID: '',
            cartData: JSON.parse(sessionStorage.getItem('cart')) || []
        }
    },
    methods:{
        routeClick(val){
            this.data = this.list.find( v => v.id == val)
            this.$router.push({path:'/detail',query:this.data})//携带数据进行跳转
        },
        cartAdd(val){
            ElMessageBox.alert('商品已加入购物车，欢迎继续选购', '温馨提示', {
                confirmButtonText: '好的，买买买'
            })

            this.data = this.list.find( v => v.id == val)
            this.store.cartAdd({
                id:this.data.id,
                name:this.data.name,
                price:this.data.price,
                onlineprice:this.data.onlineprice,
                num:1,
                total:this.data.onlineprice
            }) //调用状态管理中的添加购物车的方法
        },
        orderAdd(item) {
      // 生成订单号
      this.orderID = this.time.getFullYear().toString() + (this.time.getMonth() + 1).toString() +
        this.time.getDate().toString() + Math.random().toString().slice(2, 10);
      console.log(this.orderID);

      // 统计商品的总金额和总数量
      let num = 1; // 假设只购买一个商品
      let sum = parseFloat(item.onlineprice); // 使用当前商品的优惠价格

      // 把相关的数据添加到store中的相关数组里
      this.store.orderAdd({
        orderID: this.orderID,
        time: this.time,
        num: num,
        sum: sum,
        isOrdered: false, // 这个变量用来记录本订单是否已经完成支付
        child: [{
          id: item.id,
          name: item.name,
          price: item.price,
          onlineprice: item.onlineprice,
          num: num,
          total: sum
        }]
      });

      // 过程性检查，订单数组是否已经传递过去
      console.log(this.store.orderData);

      ElMessageBox.alert('已加入订单，请前往订单页面付款', '温馨提示', {
        confirmButtonText: '知道了',
        callback: () => {
          ElMessage({
            type: 'info',
            message: '订单加入成功',
          });
        },
      });

      // 商品加入订单后要在购物车中进行删除
      const index = this.cartData.findIndex((cartItem) => cartItem.id === item.id);
      if (index !== -1) {
        this.cartData.splice(index, 1);
        sessionStorage.setItem('cart', JSON.stringify(this.cartData));
      }
    },
    }
}
</script>

<style scoped>
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.hidden{
    margin: 0 auto;
    width: 100px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
</style>